iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0

今天要來做第二張網美照,圓形圓形圓形結合透明度加標題結束!這次沒用到什麼特別的技術,都是之前提到過的筆記,像是在Day04的時候提到的圓形,以及昨天提到的文字功能,透過這些功能來完成今天的設計。
所以來寫一個不想被擋住就用z-index決定前後位置和opacity的透明功能。/images/emoticon/emoticon07.gif

筆記區

一、上下層靠的是z-index

當我們開始加入多種元素進入網頁時,有時候可能要區分誰上誰下來避免被遮住的情況,除了按照網頁順序寫下來的默認排序,也可以利用z-index來做調整,還記得在Day05的時候有畫出Z軸的方向,參數越大表示月上層,相對的參數越小表示越下層。
下面示範是碰觸的元件會變到第一層:
codepen點這
圖片

二、元素透明化opacity

透明化顧名思義就是字面意思將元素加上透明效果,是利用opacity,參數0為完全透明,而參數1則是完全不透明,其餘透明程度則是填入介於0與1之間。
下面示範是觸碰到的元件不透明化:
codepen點這
圖片

成果展示

https://ithelp.ithome.com.tw/upload/images/20220922/20152010EztDhwTK4Q.png

參考資料

CSS z-index 的用法與最大值、最小值 - 架站盒子
CSS的z-index-決定元素的堆疊順序 - 網頁設計


上一篇
Day07 | CSS之font-family
下一篇
Day09 | CSS之border&writing-mode
系列文
30天的網頁學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言